<template>
  <div class="page-hot">
    <!-- 头部 -->
    <div class="hot-hd">
      <p>正在热映</p>
      <div class="hd-right" @click="jumpPage">
        <p>全部{{ total }}部</p>
        <i class="iconfont icon-xiangyou1"></i>
      </div>
    </div>
    <!-- 内容区 轮播图 -->
    <div class="swiper-container2">
      <div class="swiper-wrapper" v-if="!loadState">
        <img
          class="loading"
          src="../assets/loading/Fg7PS0IesulBHFZwCvfx9-pj6fgs.gif"
          alt=""
        />
      </div>
      <swiper :options="swiperOption" class="swiper-wrapper" v-if="loadState">
        <swiper-slide
          class="swiper-slide"
          v-for="(he, hi) in hotList"
          :key="hi"
        >
          <router-link
            class="link1"
            :to="{ path: '/detail', query: { id: he.id } }"
          >
            <!-- <img :src="`${he.img.replace(/w.h/, '570.400')}`" alt="" /> -->
             <img v-lazy="he.img.replace(/w.h/, '570.400')" :key="he.img" />
            <p class="hot-title">{{ he.nm }}</p>
          </router-link>
          <router-link
            class="link2"
            :to="{ path: '/cinemaTicket', query: { _id: he.id } }"
            :style="`background:${he.showStateButton.color}`"
            >{{ he.showStateButton.content }}</router-link
          >
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template> 

<script>
import "swiper/dist/css/swiper.css";
export default {
  name: "hotList",
  data() {
    return {
      hotList: [], //热门电影
      loadState: false, //loading状态
      total: -1,
      swiperOption: {
        slidesPerView: 4,
        slidesPerGroup: 4,
        observer: true,
        observeParents: true,
      },
    };
  },
  methods: {
    getData() {
      this.loadState = false;
      let pro = axios.get("index/movieOnInfoList");
      pro
        .then((res) => {
          this.hotList = res.movieList;
          this.loadState = true;
          //  console.log("请求成功111----->", this.hotList[0].id);
          this.total = res.total;
          // console.log("请求成功111----->", this.hotList);
        })
        .catch((err) => {
          console.log("请求失败----->", err);
        });
    },
    jumpPage(){
      this.$router.push({path:'/movie',query:{num:0}})
    }
  },
  created() {
    this.getData();
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.page-hot {
  width: 352px;
  margin: 14px auto;
  overflow: hidden;
  border-radius: 8px;
  background: rgb(255, 255, 255);
  // 头部
  .hot-hd {
    padding: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    p {
      font-size: 22px;
      font-weight: bold;
    }
    .hd-right {
      display: flex;
      align-items: center;
      p {
        font-size: 16px;
        font-weight: 400;
      }
      i {
        font-size: 16px;
      }
    }
  }
  //<!-- 内容区 轮播图 -->
  .swiper-container2 {
    padding-left: 12px;
    padding-bottom: 12px;
    .swiper-wrapper {
      .loading {
        width: 340px;
        height: 170px;
        object-fit: cover;
      }
      .swiper-slide {
        height: 178px;
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: space-between;
        .link1 {
          display: inline-block;
          width: 80px;
          img {
            height: 114px;
            width: 80px;
            object-fit: cover;
            border-radius: 8px;
          }
          .hot-title {
            width: 100%;
            margin: 6px 0 8px;
            text-align: center;
            font-size: 16px;
            color: #000;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .hot-pos-title {
            width: 80px;
            text-align: center;
            position: absolute;
            top: 0;
            left: 0;
            transform: translateY(40px);
            font-size: 18px;
            color: #ccc;
          }
        }
        .link2 {
          display: inline-block;
          text-align: center;
          width: 60px;
          margin: 0 auto;
          padding: 5px 0;
          border-radius: 20px;
          //  position: relative;
          font-size: 16px;
          color: #fff;
          background: #f03d37;
          box-shadow: 0 0 10px rgba(240, 61, 55, 0.15);
        }
      }
    }
  }
}
</style>